{% extends '::base.html.twig' %}
{% block body %}

<form id="form_reglement" method="post" {{ form_enctype(form) }}>

    <div class="span12" style="width: 100%">
        <div class="box gradient">
            <div class="title">
                <div class="title" style="text-align: center">
                    <h4>Nouveau Reglement</h4>
                </div>
                <div class="content noPad clearfix">
                    <table style="width: 100%">
                        <tbody>
                            <tr>
                                <td style="width: 20%">
                                    <label>Date:</label>
                                    <div>
                                    {{ form_widget(form.date)}}{{ form_widget(form._token)}}
                                            <input id="now" type="text" style="width: 70px;" readonly/>
                                            <img src="/images/start.jpg" height="30" width="30" style="display: none;" id="start"> 
                                            <img src="/images/previous.jpg" height="30" width="30" style="display: none;" id="prev"> 
                                        </div>
                                    </td>
                                    <td  style="width: 15%">
                                        <label>Fournisseur:</label>
                                        <div  style="width: 200px">
                                    {{ form_widget(form.fournisseur,{'attr':{'class':'nostyle','style':'width:100%'}})}}
                                            </div> 
                                        </td>
                                        <td  style="width: 15%">
                                            <label>Numero Facture:</label>
                                {{ form_widget(form.reference,{'attr':{'class':'span8 text','style':'width:200px'}})}}
                                        </td>
                                        <td style="width: 40%;vertical-align: bottom;">
                                            <label style="font-size: 30px;font-weight: bold">Total à Payer  :<span style="font-size: 30px;font-weight: bold;color: red" id="total_ttc">0.000</span></label>
                                        </td>
                                        <td>
                                            <a class="paiement" href="#paiement"><button class="btn"  style="width: 100%"><img src="/images/paiement/cash.png"/>Paiement</button></a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>
            </div><!-- End .box -->


        </form>
        <div class="span12" style="width: 100%">
            <div class="span6" style="width: 49%;margin-left: 0px">
                <div class="box gradient">
                    <div class="title" style="text-align: center">
                        <h4>Document Non Regler</h4>
                    </div>
                    <div class="span12" style="width: 100%;margin-top: 10px;margin-left: 0px">
                        <div class="box gradient">
                            <div class="title" style="text-align: center">
                                <h4>Factures</h4>
                            </div>
                            <div class="content noPad clearfix">
                                <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                                    <thead>
                                        <tr >
                                            <th>N°</th>
                                            <th>Date</th>
                                            <th>Montant TTC</th>
                                            <th>Reste</th>
                                        </tr>
                                    </thead>
                                    <tbody id="reglement_facture">
                                        <tr>
                                            <td style="text-align: center" colspan="5">Sélectionner Fournisseur</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="span12" style="width: 100%;margin-left: 0px">
                        <div class="box gradient">
                            <div class="title" style="text-align: center">
                                <h4>Bons Livraison</h4>
                            </div>
                            <div class="content noPad clearfix">
                                <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                                    <thead>
                                        <tr >
                                            <th>N°</th>
                                            <th>Departement</th>
                                            <th>Date</th>
                                            <th>Montant TTC</th>
                                            <th>Reste</th>
                                        </tr>
                                    </thead>
                                    <tbody id="reglement_bon_livraison">
                                        <tr>
                                            <td style="text-align: center" colspan="5">Sélectionner Fournisseur</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="span6" style="width: 49%;margin-left: 2%">
                <div class="box gradient">
                    <div class="title" style="text-align: center">
                        <h4>Document à Regler</h4>
                    </div>
                    <div class="span12" style="width: 100%;margin-top: 10px;margin-left: 0px">
                        <div class="box gradient">
                            <div class="title" style="text-align: center">
                                <h4>Factures</h4>
                            </div>
                            <div class="content noPad clearfix">
                                <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                                    <thead>
                                        <tr >
                                            <th>N°</th>
                                            <th>Date</th>
                                            <th>Montant TTC</th>
                                            <th>Reste</th>
                                        </tr>
                                    </thead>
                                    <tbody id="reglement_facture_select">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="span12" style="width: 100%;margin-left: 0px">
                        <div class="box gradient">
                            <div class="title" style="text-align: center">
                                <h4>Bons Livraison</h4>
                            </div>
                            <div class="content noPad clearfix">
                                <table id="table_facture" cellpadding="0" cellspacing="0" border="0" class="responsive  display table table-bordered" width="100%">
                                    <thead>
                                        <tr >
                                            <th>N°</th>
                                            <th>Departement</th>
                                            <th>Date</th>
                                            <th>Montant TTC</th>
                                            <th>Reste</th>
                                        </tr>
                                    </thead>
                                    <tbody id="reglement_bon_livraison_select">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div id="paiement" style='padding:10px; background:#fff;'></div>
        <input type="hidden" id="heure"/>
        <script type="text/javascript">


            $(document).ready(function() {

                $('#gds_achatbundle_reglementfournisseurtype_date').datepicker();

                var fullDate = new Date();
                var twoDigitMonth = fullDate.getMonth()
                twoDigitMonth++
                twoDigitMonth += "";
                if (twoDigitMonth.length == 1)
                    twoDigitMonth = "0" + twoDigitMonth;
                var twoDigitDate = fullDate.getDate() + "";
                if (twoDigitDate.length == 1)
                    twoDigitDate = "0" + twoDigitDate;
                var currentDate = twoDigitDate + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
                $("#gds_achatbundle_reglementfournisseurtype_date").val(currentDate)
                setInterval(time, 1000);
                $('#gds_achatbundle_reglementfournisseurtype_fournisseur').change(function() {
                    if ($(this).val() != "") {
                        $.ajax({
                            dataType: "json",
                            url: '{{path('gds_reglement_get_document_non_regler')}}',
                            data: 'id=' + $(this).val(),
                            success: function(data) {
                                $('#reglement_facture').html(data.facture)
                                $('#reglement_bon_livraison').html(data.bonLivraison)
                            }
                        })
                    }
                })
                $(".paiement").colorbox({
                    inline: true,
                    width: "50%",
                    height: "90%",
                    onOpen: function() {
                        $.ajax({
                            url: '{{path('gds_achat_reglement_paiement')}}',
                            data: 'fournisseur_id=' + $('#gds_achatbundle_reglementfournisseurtype_fournisseur').val(),
                            success: function(data) {
                                $('#paiement').html(data)
                                $('#total_a_payer').html($('#total_ttc').html())
                                $('#date_echeance').datepicker()
                                $('#montant_cheque').spinner({
                                    min: 0,
                                    max: 999999,
                                    step: 1,
                                    places: 3,
                                    showOn: 'both'
                                });
                                $('#montant_cheque').val($('#total_ttc').html())
                            }
                        })
                    },
                    onComplete: function() {

                    },
                    onCleanup: function() {

                    },
                    onClosed: function() {
                        $('#paiement').html('')
                    }
                });

            });
            function time() {
                var time = new Date($.now())
                h = time.getHours() // 0-24 format
                m = time.getMinutes()
                s = time.getSeconds()
                $('#heure').val(s + m * 60 + h * 3600)
                if (h < 10)
                    h = '0' + h
                if (m < 10)
                    m = '0' + m
                if (s < 10)
                    s = '0' + s
                $('#now').val(h + ':' + m + ':' + s)
            }
            function reglementFacture(id, rest) {
                $('#reglement_facture_select').append('<tr id="list_reglement_facture_' + id + '" onclick="annulerReglementfacture(\'' + id + '\',\'' + rest + '\')"></tr>');
                $('#list_reglement_facture_' + id).html($('#list_facture_reglement_' + id).html())
                $('#list_facture_reglement_' + id).hide();
                $('#total_ttc').html((parseFloat($('#total_ttc').html()) + parseFloat(rest)).toFixed(3))
            }
            function annulerReglementfacture(id, rest) {
                $('#list_reglement_facture_' + id).remove()
                $('#list_facture_reglement_' + id).show();
                $('#total_ttc').html((parseFloat($('#total_ttc').html()) - parseFloat(rest)).toFixed(3))
            }
            function annulerReglementbonLivraison(id, rest) {
                $('#list_reglement_bon_livraison_' + id).remove()
                $('#list_bon_livraison_reglement_' + id).show();
                $('#total_ttc').html((parseFloat($('#total_ttc').html()) - parseFloat(rest)).toFixed(3))
            }
            function reglementBonLivraison(id, rest) {
                $('#reglement_bon_livraison_select').append('<tr id="list_reglement_bon_livraison_' + id + '" onclick="annulerReglementbonLivraison(\'' + id + '\',\'' + rest + '\')"></tr>');
                $('#list_reglement_bon_livraison_' + id).html($('#list_bon_livraison_reglement_' + id).html())
                $('#list_bon_livraison_reglement_' + id).hide();
                $('#total_ttc').html((parseFloat($('#total_ttc').html()) + parseFloat(rest)).toFixed(3))
            }
            function rglememt() {
                if ($('#type_paiement').val() != 'espece') {
                    if ($('#compte_fournisseur').val() == '') {
                        if ($('#compte_rib').val() == '' || $('#compte_banque').val() == '')
                        {
                            $('#compte_banquaire').html('Ce champ est Obligatoire')
                            return false
                        }
                        else
                            $('#compte_banquaire').html('')
                    }
                    if ($('#numero_cheque').val() == '') {
                        $('#numero_cheque_error').html('Ce champ est Obligatoire')
                        return false
                    } else {
                        $('#numero_cheque_error').html('')
                    }
                    if ($('#date_echeance').val() == '') {
                        $('#date_echeance_error').html('Ce champ est Obligatoire')
                        return false
                    } else {
                        $('#date_echeance_error').html('')
                    }
                }
                if ($('#montant_cheque').val() == '') {
                    $('#montant_cheque_error').html('Ce champ est Obligatoire')
                    return false
                } else {
                    if (parseFloat($('#montant_cheque').val()) <= 0) {
                        $('#montant_cheque_error').html('Il faut que ce champ est supérieur a 0')
                        return false
                    } else
                        $('#montant_cheque_error').html('')
                }
                td_type = '<td id="type_' + index + '">' + $('#type_paiement option:selected').html() + '</td>'
                if ($('#type_paiement').val() != 'espece') {
                    td_numero = '<td id="numero_' + index + '">' + $('#numero_cheque').val() + '</td>'
                    td_date = '<td id="date_' + index + '">' + $('#date_echeance').val() + '</td>'
                    td_compte = '<td style="display: none"><input id="compte_id_' + index + '" type="hidden" value="' + $('#compte_fournisseur').val() + '" /></td>'
                } else {
                    td_numero = '<td id="numero_' + index + '">-</td>'
                    td_date = '<td id="date_' + index + '">-</td>'
                    td_compte = '<td style="display: none"></td>'
                }
                td_montant = '<td id="montant_' + index + '">' + $('#montant_cheque').val() + '</td>'
                $('#list_paiement').append('<tr>' + td_type + td_montant + td_numero + td_date + td_compte + '</td>' + '</tr>')
                if ($('#compte_rib').val() != '' || $('#compte_banque').val() != '') {
                    $.ajax({
                        dataType: 'json',
                        url: '{{path('gds_achat_ajax_add_compte')}}',
                        data: 'fournisseur_id=' + $('#gds_achatbundle_reglementfournisseurtype_fournisseur').val() + '&rib=' + $('#compte_rib').val() + '&banque=' + $('#compte_banque').val(),
                        success: function(data) {
                            $('#compte_fournisseur').html(data.view)
                            $('#compte_id_' + index).val(data.compte_id)
                            index++
                        }
                    })
                } else
                    index++
                resetFormPaiement()
            }
            function resetFormPaiement() {
                $('#numero_cheque').val('')
                $('#numero_cheque_error').html('')
                $('#date_echeance').val('')
                $('#date_echeance_arror').html('')
                $('#montant_cheque').val('')
                $('#montant_cheque_error').html('')
                $('#compte_banquaire').html('')
                $('#compte_rib').val('')
                $('#compte_banque').val('')
                $('.form_compte_contenu').hide()
                $('.paiement_par_document').hide()
                $('#type_paiement option').each(function() {
                    if ($(this).val() == 'espece')
                        $(this).attr('selected', 'selected')
                    else
                        $(this).removeAttr('selected')
                })
            }
            function saveRglememt() {
                if ($('#list_paiement tr').length <= 0) {
                    $.msgBox({
                        title: "Reglement Fournisseur",
                        content: "Il faut crée au moins une paiement",
                        type: "error",
                        buttons: [{value: "OK"}]
                    });
                } else {
                    var paiements = []
                    var factures = []
                    var bonLivraisons = []
                    var i = 0
                    $('#list_paiement tr').each(function() {
                        paiements[i] = new Object()
                        paiements[i].compte = $('#compte_id_' + i).val()

                        paiements[i].montant = $('#montant_' + i).html()
                        paiements[i].date = $('#date_' + i).html()
                        paiements[i].type = $('#type_' + i).html()
                        paiements[i].numero = $('#numero_' + i).html()
                        i++
                    })
                    i = 0
                    $('#reglement_facture_select tr').each(function() {
                        factures[i] = parseInt($(this).children('td').children('input[id^="facture_"]').val())
                        i++
                    })
                    i = 0
                    $('#reglement_bon_livraison_select tr').each(function() {
                        bonLivraisons[i] = parseInt($(this).children('td').children('input[id^="facture_"]').val())
                        i++
                    })
                    i = 0
                    $.ajax({
                        dataType: 'json',
                        type: 'post',
                        url: '{{path('gds_achat_reglement')}}',
                        data: $('#form_reglement').serialize() + '&paiements={"paiements":' + JSON.stringify(paiements) + '}&heure=' + $('#heure').val() + '&factures=' + JSON.stringify(factures) + '&bonLivraisons=' + JSON.stringify(bonLivraisons),
                        success: function(data) {
                            if (data.success) {
                                $('#cboxClose').click();
                                $.msgBox({
                                    title: "Reglement",
                                    content: "Enregistrement Effectué avec succés",
                                    type: "info",
                                    buttons: [{value: "OK"}],
                                    success: function(result) {
                                        location.reload();
                                    }
                                });
                            } else {
                                $.msgBox({
                                    title: "Reglement",
                                    content: "Erreur D'enregistrement",
                                    type: "error",
                                    buttons: [{value: "OK"}]
                                });
                            }

                        }
                    })
                }
            }
            </script>
        </script>
{% endblock %}